//
//  main.js
//
//  A project template for using arbor.js
//

(function($) {

    var Renderer = function(canvas) {
        var canvas = $(canvas).get(0)
        var ctx = canvas.getContext("2d");
        var particleSystem

        var that = {

            init:function(system) {

                particleSystem = system

                particleSystem.screenSize(canvas.width, canvas.height)
                particleSystem.screenPadding(80) // leave an extra 80px of whitespace per side

                // set up some event handlers to allow for node-dragging
                that.initMouseHandling()

            },

            redraw:function() {

                ctx.fillStyle = "white"
                ctx.fillRect(0, 0, canvas.width, canvas.height)

                particleSystem.eachEdge(function(edge, pt1, pt2) {

                    ctx.strokeStyle = "rgba(0,0,0, .333)"
                    ctx.lineWidth = 1
                    ctx.beginPath()
                    ctx.moveTo(pt1.x, pt1.y)
                    ctx.lineTo(pt2.x, pt2.y)

                    ctx.stroke();



                });

                particleSystem.eachNode(function(node, pt) {
                    // node: {mass:#, p:{x,y}, name:"", data:{}}
                    // pt:   {x:#, y:#}  node position in screen coords

                    // draw a rectangle centered at pt


                    var w = 30
                    var h = 20

                    ctx.fillStyle = "grey"
                    ctx.fillRect(pt.x - 21, pt.y - 11, 42, 22);

                    ctx.fillStyle = "white"
                    ctx.fillRect(pt.x - 20, pt.y - 10, 40, 20);

                    ctx.fillStyle = "black"
                    ctx.fillText(node.name, pt.x - 15, pt.y);


                })
            },

            initMouseHandling:function() {
                // no-nonsense drag and drop (thanks springy.js)
                var dragged = null;

                // set up a handler object that will initially listen for mousedowns then
                // for moves and mouseups while dragging
                var handler = {
                    clicked:function(e) {
                        var pos = $(canvas).offset();
                        _mouseP = arbor.Point(e.pageX - pos.left, e.pageY - pos.top)
                        dragged = particleSystem.nearest(_mouseP);

                        if (dragged && dragged.node !== null) {
                            // while we're dragging, don't let physics move the node
                            dragged.node.fixed = true
                        }

                        $(canvas).bind('mousemove', handler.dragged);
                        $(window).bind('mouseup', handler.dropped);

                        return false
                    },
                    dragged:function(e) {
                        inDrag = true;
                        var pos = $(canvas).offset();
                        var s = arbor.Point(e.pageX - pos.left, e.pageY - pos.top)

                        if (dragged && dragged.node !== null) {
                            var p = particleSystem.fromScreen(s)
                            dragged.node.p = p
                        }

                        return false
                    },

                    dropped:function(e) {
                        inDrag = false;
                        if (dragged === null || dragged.node === undefined) return
                        if (dragged.node !== null) dragged.node.fixed = false
                        dragged.node.tempMass = 1000
                        dragged = null
                        $(canvas).unbind('mousemove', handler.dragged)
                        $(window).unbind('mouseup', handler.dropped)
                        _mouseP = null
                        return false
                    }
                }

                // start listening
                $(canvas).mousedown(handler.clicked);

            }

        }
        return that
    }

    $(document).ready(function() {
        var sys = arbor.ParticleSystem(10, 10, 0.0) // create the system with sensible repulsion/stiffness/friction
        sys.parameters({gravity:false}) // use center-gravity to make the graph settle nicely (ymmv)
        sys.renderer = Renderer("#viewport") // our newly created renderer will have its .init() method called shortly by sys...

        // add some nodes to the graph and watch it go...

        sys.addNode('AMPK')
        sys.addNode('AKT')
        sys.addNode('Tsc1')
        sys.addNode('Rheb')
        sys.addNode('mTUR')

        sys.addEdge('AMPK', 'Tsc1');
        sys.addEdge('AKT', 'Tsc1');
        sys.addEdge('Tsc1', 'Rheb');
        sys.addEdge('Rheb', 'mTUR');

    })

})(this.jQuery)